<template>
	<view>
		<!-- 导航栏 -->
		<u-navbar :is-back="false">
			<view class="img">
				<u-image width="2rem" height="2rem" :src="src"></u-image>
			</view>
			<u-search></u-search>
		</u-navbar>

		<!-- 轮播 -->
		<u-swiper :list="list"></u-swiper>

	<!-- 选项卡 -->
    <view
      style="
        font-size: 1rem;
        line-height: 2.5rem;
        border-bottom: 0.05rem solid #f1f1f1;
        text-align: center;
        margin-top: 0.5rem;
        background: #fff;
        display: flex;
        align-item: center;
        justify-content: center;
      "
    >
      <u-image
        style="display: inline-block"
        width="2rem"
        height="2rem"
        src="/static/images/jd2.png"
      ></u-image>
      出行计划</view
    >
    <u-tabs
      :list="tabslist"
      :is-scroll="false"
      :current="current"
      @change="change"
      bar-width="350"
    ></u-tabs>

    <swiper
      class="swiper"
      duration="200"
      circular="true"
      :current="swipercurrent"
      @change="schange"
      :style="{ height: height + 'rpx' }"
    >
      <swiper-item>
        <view v-for="(item, index) in swiperlist" :key="index">
          <view class="item u-m-b-15">
            <u-image height="320rpx" width="100%" :src="item.bg"></u-image>
            <view class="detail">
              <view class="left" style="z-index: 1">
                <view>{{ item.num }} / {{ item.maxnum }} 人报名</view>
                <view>出发时间 {{ item.time }}</view>
              </view>
              <view class="right" style="z-index: 1">
                <!-- <u-button type="warning" size="default" @click="jump()">查看详情</u-button> -->
                <navigator url="/Home/actdetail">
                  <button type="primary" style="width:6rem;height:2.5rem;font-size:1rem;">查看详情</button>
                </navigator>
              </view>
            </view>
            <view class="content u-p-t-25 u-p-l-20 u-m-5 u-p-b-25" style="background:#fff;">
              <view class="u-font-40">{{item.title}}</view>
              <view>{{item.content}}</view>
            </view>
          </view>
        </view>
      </swiper-item>
      <swiper-item> 
        <view v-for="(item, index) in swiperlist1" :key="index">
          <view class="item u-m-b-15">
            <u-image height="320rpx" width="100%" :src="item.bg"></u-image>
            <view class="detail">
              <view class="right" style="position:relative;right:-7rem;">
                <u-button type="warning" size="default">查看详情</u-button>
              </view>
            </view>
            <view class="content u-p-t-25 u-p-l-20 u-m-5 u-p-b-25" style="background:#fff;">
              <view class="u-font-40">{{item.title}}</view>
              <view>{{item.content}}</view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>

	</view>
</template>

<script>
	export default {
	  onShow() {
	    var that = this;
	    uni.getSystemInfo({
	      success: function (res) {
	        // console.log(res.windowHeight);
	        that.height = res.windowHeight;
	      },
	    });
	  },
	data() {
		return {
			src:"https://uviewui.com/common/logo.png",
			list:[
				'/static/images/banner.jpg',
				'/static/images/banner2.jpg',
				'/static/images/banner3.jpg',
				'/static/images/banner4.jpg',
			],
			swiperlist: [
					{
					  bg: "/static/images/bg.jpg",
					  num: 2,
					  maxnum: 10,
					  time: "2020/10/02",
					  title: "黄河小浪底",
					  content: "卫坡古民居翠湾果岭观唐生态园炎帝本草园洛阳粤钰青",
					},
					{
					  bg: "/static/images/bg.jpg",
					  num: 2,
					  maxnum: 10,
					  time: "2020/10/02",
					  title: "黄河小浪底",
					  content: "卫坡古民居翠湾果岭观唐生态园炎帝本草园洛阳粤钰青",
					},
					{
					  bg: "/static/images/bg.jpg",
					  num: 2,
					  maxnum: 10,
					  time: "2020/10/02",
					  title: "黄河小浪底",
					  content: "卫坡古民居翠湾果岭观唐生态园炎帝本草园洛阳粤钰青",
					},
				  ],
				  swiperlist1: [
					{
					  bg: "/static/images/bg1.jpg",
					  title: "黄河小浪底",
					  content: "卫坡古民居翠湾果岭观唐生态园炎帝本草园洛阳粤钰青",
					},
					{
					  bg: "/static/images/bg1.jpg",
					  title: "黄河小浪底",
					  content: "卫坡古民居翠湾果岭观唐生态园炎帝本草园洛阳粤钰青",
					},
					{
					  bg: "/static/images/bg1.jpg",
					  title: "黄河小浪底",
					  content: "卫坡古民居翠湾果岭观唐生态园炎帝本草园洛阳粤钰青",
					},
				  ],
				  tabslist: [{ name: "旅游精选" }, { name: "旅游文章" }],
				  current: 0,
				  swipercurrent: 0,
				  height: 0,
				};
		},
	  methods: {
	    change(index) {
	      // console.log(index);
	      this.swipercurrent = index;
	    },
	    schange(index) {
	      // console.log(index)
	      this.current = index.detail.current;
	    },
	  }
	}
</script>

<style lang="scss" scope>
.u-status-bar {
  height: 0 !important;
}
.u-navbar-placeholder {
  height: 48px !important;
}
.u-navbar-inner {
  margin-right: 0 !important;
}
.img {
  margin: 0 0.8rem;
}
u-search {
  width: 80%;
}
.swiper {
  display: flex;
  flex-direction: column;
}
swiper-item {
  // height:20rem;
  overflow: auto !important;
}
.detail {
  display: flex;
  justify-content: space-around;
  margin-top: -3rem;
  z-index: 1;
  color: #fff;
}
</style>